<template>
  <view class="goods_detail">
    <!-- 轮播图 -->
    <u-swiper
      :list="pics"
      img-mode="aspectFit"
      height="497"
      @click="preview"
    ></u-swiper>
    <!-- 价格、内容 -->
    <view class="content">
      <view class="price_share">
        <view class="price">{{ goods_detail.goods_price }}</view>
        <view class="share">
          <u-icon size="46" color="#707070" name="zhuanfa"></u-icon>
          <u-icon
            size="46"
            color="#707070"
            name="star"
            class="u-m-l-45"
          ></u-icon>
        </view>
      </view>
      <view class="title">
        {{ goods_detail.goods_name }}
      </view>
    </view>
    <!-- 站位颜色盒子 -->
    <view style="background-color: #f9f9f9; height: 19rpx"></view>
    <!-- 图文详情 -->
    <u-parse class="detail" :html="goods_detail.goods_introduce"></u-parse>
    <!-- 加入购物车 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <view class="item">
          <u-icon
            name="home"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">店铺</view>
        </view>
        <view class="item car" @click.native="jumpToCart">
          <u-badge
            class="car-num"
            :count="count"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </view>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @tap="onAdd">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customStyle: {
        height: `60rpx`,
        width: `196rpx`,
        fontSize: `26rpx`,
      },
      pics: [], //轮播图数据
      goods_detail: {}, //商品详情数据
    };
  },
  async onLoad({ goods_id = 9829 }) {
    console.log(this.$store.state);
    // 获取商品详情
    const res = await this.$u.api.getGoodsDetail({ goods_id });
    console.log(res);
    this.goods_detail = res.message;
    this.pics = res.message.pics.map((v) => v.pics_mid);
  },
  methods: {
    // 缩略图点击显示
    preview(index) {
      wx.previewImage({
        current: this.pics[index],
        urls: this.pics,
      });
    },
    // 跳转到购物车
    jumpToCart() {
      this.$u.route({
        url: "/pages/cart/cart",
        type: "switchTab",
      });
    },
    // 添加到购物车
    onAdd() {
      // 获取vuex里面数据
      const cateList = this.$store.state.cateList;
      const index = cateList.findIndex(
        (item) => item.goods_id === this.goods_detail.goods_id
      );
      if (index === -1) {
        // 没找到
        // 添加数据
        cateList.push({ ...this.goods_detail, count: 1, checked: true });
      } else {
        // 找到了 修改数据
        cateList[index].count++;
      }
      // 覆盖原数据
      this.$store.commit("changeList", cateList);
      console.log(index);
    },
  },
  computed: {
    // 获取vuex数据 渲染购物车小图标的数量
    count() {
      return this.$store.state.cateList.reduce(
        (total, v) => (total += v.count),
        0
      );
    },
  },
};
</script>
<style lang="scss">
.goods_detail {
  padding-bottom: 97rpx;
}
.content {
  padding: 19rpx 36rpx 48rpx 33rpx;
  .price_share {
    display: flex;
    justify-content: space-between;
    height: 50rpx;
    margin-bottom: 19rpx;
    .price {
      color: #ea4350;
      font-size: 36rpx;
      font-weight: 700;
      &::before {
        content: "￥";
        font-size: 24rpx;
      }
    }
    .share {
      display: flex;
      align-items: flex-end;
      u-icon {
      }
    }
  }
  .title {
    font-weight: 700;
    font-size: 30rpx;
  }
}
.navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>